<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		用户名：<input class="i1" type ="text" value="admin" name="username" id="username"/><br>
		密码：<input class="i1" type ="text" value="1234" name="pwd" id="pwd"/><br>
		爱好：<input type ="checkbox" value="爱学习" name="hobby"/>爱学习
		<input type ="checkbox" value="爱编程" name="hobby"/>爱编程
		<input type ="checkbox" value="睡觉" name="hobby"/>睡觉
		<br>
		<button onclick="selectAll()">全选</button>
		<button onclick="unselectAll()">不选</button>
		<button onclick="fanselectAll()">反选</button>
	</body>
</html>
<script>
	//根据id属性获取元素对象
	var pwd = document.getElementById("pwd").value;
	//根据对象的class属性获取的是多个元素对象,不能直接使用元素对象的相关属性
	var ips = document.getElementsByClassName("i1");
	for(var i = 0;i < ips.length;i++){
		console.log(ips[i].name);
	}
	//根据对象的name属性获取的是多个元素对象,不能直接使用元素对象的相关属性
	var ips = document.getElementsByName("hobby");
	for(var i = 0;i < ips.length;i++){
		console.log(ips[i].checked);
	}
	//根据标签获取的是多个元素对象,不能直接使用元素对象的相关属性
	var ips = document.getElementsByTagName("input");
	for(var i = 0;i < ips.length;i++){
		console.log(ips[i].value);
	}
	function selectAll(){
		var ips = document.getElementsByName("hobby");
		for(var i = 0;i < ips.length;i++){
			//设置元素对象的checked属性
			ips[i].checked = true;
		}
	}
</script>
